<template>
	<action-bar type="back" :screen="isFullScreen" title="视频通话"></action-bar>
	<view class=" ">
		<image class="height100vh image posiab top0" src="/static/img/changko.png"></image>
		<view class="posire zindex5 ">
			<view class="height60"></view>
			<view class="bgfff mg30 ra20  " :style="{height:hhg+'px'}">
				<view class="flex">
					<scroll-view scroll-y class="border-rEBECEF scroll-y scroll-view" :style="{height:hhg-20+'px'}"
						style="flex: 0 0 55%;">
						<view class="flex-ju-b pg30-50">
							<view class="size36 color333 bold flex-a-i ">
								<view class="wh6-30 mt8 bg2C7BFF mr15"></view>通讯录
							</view>
							<view class="flex-a-i posire ">
								<image mode="widthFix" class="image width40 posiab left10" src="/static/img/suosuo.png">
								</image>
								<input class="pl60 bordere6ebf0 wh500-64" v-model="searchVlaue" @confirm="onSearch"
									placeholder="搜索组织/用户/终端/设备" />
							</view>
						</view>
						<view class="ml50">
							<el-tabs @tab-change="tabClick" v-model="activeName" class="demo-tabs">
								<el-tab-pane label="组织架构" name="first">
									
									<el-checkbox-group v-show="searchData" v-model="checkedCities"
										@change="meetingCheckedCitiesChange">
										<el-checkbox v-for="(item,k) in searchMeetingMonitor" class="mb30" :key="k"
											:label="item.departmentName" :value="item">
											<view class="flex-a-i ">
												<image mode="widthFix" class="image width50 ml10 mr10"
													src="/static/img/xaing.png"></image>
												<view class="">
													<view class="color333 size24">{{item.departmentName}}</view>
													<view class="color4BBF92 size20 mt10"
														v-if="item.userOnlineStatus==1">
														在线</view>
													<view class="colore6e6e6 size20 mt10"
														v-else-if="item.userOnlineStatus==0">
														离线</view>
													<view class="color4BBF92 size20 mt10"
														v-else-if="item.userOnlineStatus==5">
														邀请中</view>
													<view class="color4BBF92 size20 mt10"
														v-else-if="item.userOnlineStatus==2">
														会议中</view>
												</view>
											</view>
										</el-checkbox>
									</el-checkbox-group>

									<el-tree v-show="!searchData" ref="myTree1" :data="tabdatapane"
										:check-on-click-node="true" @check="currentChange" show-checkbox
										node-key="userId" :expand-on-click-node="false"
										:default-checked-keys="defaultMeeting">
										<template #default="{ node, data }">
											<view class="flex-a-i">
												<image mode="widthFix" class="image width50 ml10 mr10"
													src="/static/img/xaing.png"></image>
												<view class="">
													<view class="color333 size24">{{data.departmentName}}</view>
													
													<view class="color4BBF92 size20" v-if="data.userOnlineStatus==1">
														在线</view>
													<view class="colore6e6e6 size20"
														v-else-if="data.userOnlineStatus==0">
														离线</view>
													<view class="color4BBF92 size20"
														v-else-if="data.userOnlineStatus==5">
														邀请中</view>
													<view class="color4BBF92 size20" v-else-if="data.userOnlineStatus==2">
														会议中</view>
														
												</view>
											</view>
										</template>
									</el-tree>
								</el-tab-pane>

								<el-tab-pane label="监控设备" name="second">

									<el-checkbox-group v-show="searchData" v-model="checkedCities"
										@change="monitorCheckedCitiesChange">
										<el-checkbox v-for="(data,k) in datasSearch" :key="k" class="mb30"
											:label="data.name" :value="data">
											<view class="flex-a-i posire">
												<image v-if="data.online_status==1" mode="widthFix"
													class="image width40 ml10 mr10" src="/static/zaixianyi.png">
												</image>
												<image v-else-if="data.online_status==2" mode="widthFix"
													class="image width40 ml10 mr10" src="/static/yichangyi.png">
												</image>
												<image v-else-if="data.online_status==0" mode="widthFix"
													class="image width40 ml10 mr10" src="/static/lixianyi.png">
												</image>
												<view class="">
													<view class="color333 size24">{{data.name}}</view>
													<view v-if="data.online_status==1"
														class="wh5-5 bg27e17a posiab left-40 top20"></view>
													<view v-else-if="data.online_status==0"
														class="wh5-5 bgfc474c posiab left-40 top20"></view>
													<view v-else-if="data.online_status==2"
														class="wh5-5 bgf17e2f posiab left-40 top20"></view>
												</view>
											</view>
										</el-checkbox>
									</el-checkbox-group>

									<el-tree v-show="!searchData" ref="myTree" @check="currentChange1"
										:check-on-click-node="true" :data="monitorLIST" show-checkbox node-key="id"
										:expand-on-click-node="false" :default-checked-keys="defaultMonitor">
										<template #default="{ node, data }">
											<view class="flex-a-i posire">
												<image v-if="data.online_status==1" mode="widthFix"
													class="image width40 ml10 mr10" src="/static/zaixianyi.png">
												</image>
												<image v-else-if="data.online_status==2" mode="widthFix"
													class="image width40 ml10 mr10" src="/static/yichangyi.png">
												</image>
												<image v-else-if="data.online_status==0" mode="widthFix"
													class="image width40 ml10 mr10" src="/static/lixianyi.png">
												</image>
												<view class="">
													<view class="color333 size24">{{data.name}}</view>
													<view v-if="data.online_status==1"
														class="wh5-5 bg27e17a posiab left-40 top20"></view>
													<view v-else-if="data.online_status==0"
														class="wh5-5 bgfc474c posiab left-40 top20"></view>
													<view v-else-if="data.online_status==2"
														class="wh5-5 bgf17e2f posiab left-40 top20"></view>
												</view>
											</view>
										</template>
									</el-tree>
								
								</el-tab-pane>
							</el-tabs>
						</view>
					</scroll-view>

					<view class="flex1 pg30 size28">
						<view class="flex-ju-b">
							<view>
								<view>已选：<text class="color165FFF">{{mottinglist.length}}</text></view>
							</view>
							<view @click="all_clear" class="color165FFF">清空</view>
						</view>
						<scroll-view class="scroll-view" scroll-y :style="{height:hhg-120+'px'}">
							<view class="flex-a-i flex-wrap">
								<view v-for="(item,index) in mottinglist" :key="index"
									class="bge8efff flex-a-i pg2-20 mr30 mt30">
									<image mode="widthFix" class="image width50  ml10 mr10" src="/static/img/xaing.png">
									</image>
									{{item.name?item.name:item.departmentName}}
									<image @click="tapClose(item,index)" mode="widthFix" class="image ml10 width24"
										src="/static/img/guanbi.png">
									</image>
								</view>
							</view>
						</scroll-view>
						

						<view class="flex-ju-c  ">
							<button :disabled="!mottinglist.length" @click="call"
								class="wh300-80 ra8 flex-ju-c posiab bottom50 colorfff bg165FFF">
								呼叫
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<tishi ref="upLogOut" @confirm="onLogOut" logout="1" bgcolor="#fc474c" title="当前账号在其他设备登录？"></tishi>
		<!-- <call-end :wwg="wwg" :textname="calldata.conference_name" @rejectJoin="rejectJoin" @incomingCall="incomingCall"></call-end> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isFullScreen: true,
				checkedCities: [],
				searchMeetingMonitor: [],
				value: "",
				timeout: 0,
				calldata: {},
				huiyihao: "",
				searchData: false,
				datasSearch: [],
				meeting_val: [],
				monitor_val: [],
				defaultMeeting: [],
				defaultMonitor: [],


				hhg: "",
				tabdatapane: [],
				activeName: "first",
				monitorLIST: [],
				mottinglist: [],
				jiankonglist: [],
				huiyilist: [],
				searchVlaue: ""
			}
		},
		onShow() {
			this.isFullScreen = !this.isFullScreen
			uni.$off('callSucceed')
			uni.$on('callSucceed', res => {
				uni.hideLoading()
				uni.navigateTo({
					url: '/pages/index/video'
				})
			})

			uni.$off('onLogOut')
			uni.$on('onLogOut', res => {
				this.$refs.upLogOut.show()
			})
			if (flutter) {
				flutter.call('setActionBar', {
					type: 'back',
					title: "视频通话",
					isWhite: false,
					onDownloads: "",
					onSettings: '',
					onBack: 'handleBack()',
					onClose: 'handleClickclose()'
				}, (result, error) => {})
			}
			window.handleBack = () => {
				this.back()
			}
			window.handleClickclose = () => {
				uni.$emit('exitclose')
				this.$refs.showtishi.show()
			}
		},
		onReady() {
			uni.onWindowResize((res) => {
				this.hhg = res.size.windowHeight - 70
			});
		},
		onLoad() {

		},
		mounted() {
			this.hhg = this.wheight - 70
			uni.showLoading()
			this.http('/v1/organization/meeting/tree/list').then(res => {
				uni.hideLoading()
				var data = [res.data]
				this.traverseTree(data)
				this.tabdatapane = data
			})


		},

		methods: {
			meetingCheckedCitiesChange(val) {
			
				this.meeting_val = val
				let arr = []
				val.map(item => {
					arr.push(item.userId)
				})
				this.defaultMeeting = arr
				this.mottinglist = [...this.jiankonglist, ...this.huiyilist, ...this.meeting_val, ...this.monitor_val];
			},
			monitorCheckedCitiesChange(val) {
				this.monitor_val = val
				let arr = []
				val.map(item => {
					arr.push(item.id)
				})
				this.defaultMonitor = arr
				this.mottinglist = [...this.jiankonglist, ...this.huiyilist, ...this.meeting_val, ...this.monitor_val];
			},
			onSearch() {
				if (this.searchVlaue) {
					this.searchData = true
					uni.showLoading()
					if (this.activeName == 'second') {
						this.datasSearch = []
						this.http('/v1/organization/tree/list', {
							searchName: this.searchVlaue
						}).then(res => {
							uni.hideLoading()
							this.monitorTree(res.data)
							// this.datasSearch = res.data
						})
					} else {
						this.searchMeetingMonitor = []
						this.http('/v1/organization/meeting/tree/list', {
							searchName: this.searchVlaue
						}).then(res => {
							uni.hideLoading()
							var data = [res.data]
							this.traverseTree(data, 1)
							//this.tabdatapane = data
						})
					}
				} else {
					this.searchData = false
					// this.tabClick(this.activeName)
				}
			},
			monitorTree(node) {
				node.map(item => {

					this.datasSearch.push(item)

					if (item.children && item.children.length) {
						this.monitorTree(item.children)
					}



				})
			},

			traverseTree(node, type) {
				node.map(item => {
					if (item.meetingUsers && item.meetingUsers.length) {
						item.meetingUsers.map(a => {
							if (type) {
								this.searchMeetingMonitor.push({
									disabled:a.userOnlineStatus==2,
									departmentName: a.userNickName,
									userId: a.userId,
									userCuid: a.userCuid,
									userOnlineStatus: a.userOnlineStatus,
									userIsEndpoints: a.userIsEndpoints,
									userLoginId: a.userLoginId,
								})
							}
							item.children.push({
								disabled:a.userOnlineStatus==2,
								departmentName: a.userNickName,
								userId: a.userId,
								userCuid: a.userCuid,
								userOnlineStatus: a.userOnlineStatus,
								userIsEndpoints: a.userIsEndpoints,
								userLoginId: a.userLoginId,
							})
						})
					}
					if (item.children && item.children.length) {
						this.traverseTree(item.children, type)
					}
				})
			},

			handleWheel(event) {
				const treeContainer = this.$refs.treeContainer; // 确保你的el-tree有ref="treeContainer"
				treeContainer.scrollTop += event.deltaY; // 根据需要调整方向和速度
				event.preventDefault(); // 阻止默认的滚动事件
			},

			call() {

				let arr = []
				let monitorIDs = []

				this.mottinglist.map(item => {
					// zjsdk3.host_dial_out(item.userCuid,'auto')
					if (item.id) {
						monitorIDs.push(item.id + '')
					} else {
						arr.push(+item.userId)
					}
				})

				this.get_room_info().then(res => {
					uni.hideLoading()
					loginMgr.select_usr_join_mr(res.cuid, '', res.ctrl_pwd, '', arr).then(ress => {
						uni.hideLoading()
						if (ress.result == 0) {
							let ser = uni.getStorageSync('meetingService')
							let user = uni.getStorageSync('user').user
							this.huiyihao = res.cuid
							zjsdk3.make_call_now(ser.meetingIp, ser.port, res.cuid, res.ctrl_pwd, user
								.nickName, uni.getStorageSync('sdkinfo').account)
							setTimeout(() => {
								zjsdk3.ags_invite_ipc(monitorIDs)
							}, 2000)
						} else {
							if (ress.code == 7094) {
								uni.hideLoading()
								uni.showToast({
									title: "当前会议室正在使用，请更换会议室",
									icon: "none"
								})
								return
							} else {
								uni.showToast({
									title: ress.reason,
									icon: "none"
								})
								return
							}
						}

					})
				})
			},
			get_room_info() {
				uni.showLoading()
				return new Promise((resolve, reject) => {
					loginMgr.get_self_room_info().then(res => {
						resolve(res)
					})
				})
			},

			tabClick(e) {
				this.searchData = false
				this.activeName = e
				if (this.searchVlaue) {
					this.onSearch()
				} else {
					if (this.monitorLIST.length) {
						return
					}
					if (e == 'second') {
						uni.showLoading()
						this.http('/v1/organization/tree/list').then(res => {
							uni.hideLoading()
							this.monitorLIST = res.data
						})
					}
				}


			},
			tapClose(item, index) {
				if (item.departmentName) {
					this.$refs.myTree1.setChecked(item, false);
				} else {
					this.$refs.myTree.setChecked(item, false);
				}
				this.mottinglist.splice(index, 1)
			},
			all_clear() {
				this.defaultMonitor=[]
				this.defaultMeeting=[]
				this.jiankonglist=[]
				this.checkedCities=[]
				this.mottinglist = []
				this.huiyilist=[]
				this.meeting_val=[]
				this.monitor_val=[]
				this.$refs.myTree1.setCheckedKeys([]);
				this.$refs.myTree.setCheckedKeys([]);
			},
			currentChange(index, item) {
				
				let arr = []
				item.checkedNodes.map(item => {
					if (!item.children) {
						arr.push(item)
					}
				})
				this.huiyilist = arr
				this.mottinglist = [...this.jiankonglist, ...this.huiyilist, ...this.meeting_val, ...this.monitor_val];
			},
			currentChange1(index, item) {
				let arr = []
				item.checkedNodes.map(item => {
					if (!item.children.length) {
						arr.push(item)
					}
				})
				this.jiankonglist = arr
				this.mottinglist = [...this.jiankonglist, ...this.huiyilist, ...this.meeting_val, ...this.monitor_val];
			},

			handleClick(q, w, e) {
			},
			dfsds() {
				this.$refs.yaoqinfg.open()

			},
			tanp(item) {
				if (item.tindex == 1) {
					item.tindex = 0
				} else {
					item.tindex = 1
				}
			},
			huiyisvaluechange(e) {
				if (e == 22) {

				}
			}
		}
	}
</script>

<style>
	/deep/ .el-tree-node__content {
		height: 50px;
		/* 设置你想要的节点高度 */
	}


	/deep/ .el-tree-node__expand-icon {
		color: #165DFF;
	}

	.shwo {
		background: linear-gradient(#ebecef, #f9f9f9);
	}


	.borderf4f6f8 {
		color: #333333;
		border: 1px solid #f4f6f8;
	}

	.popperclass {}
</style>